<template>
  <transition leave-active-class="animated short fadeOut">
    <div v-if="showSplash" ref="splash" class="splash"></div>
  </transition>

  <router-view v-slot="{ Component }">
    <transition
      enter-active-class="animated short myFadeIn"
      leave-active-class="animated short myFadeOut"
    >
      <component :is="Component" />
    </transition>
  </router-view>

  <f-nav ref="nav" v-show="$route.meta.nav" />
  <f-guide />
  <f-update ref="update" />
  <f-download />
  <f-envs ref="envs" />
  <div id="refresh"><!-- 下拉刷新 --></div>
</template>

<script>
import { useMapState, useComputed } from "@/utils/vuexm";
import { ref, watch, onMounted, nextTick, reactive } from "vue";
import { useStore } from "vuex";
import { useI18n } from "vue-i18n";
import { gtValidate, getDeviceLang } from "@/utils";
import GlobalWebSocket from "@/assets/js/socket";
import { langs } from "@/lang";

export default {
  setup(params, ctx) {
    window.$i18n = useI18n();
    const isApp = (window.isApp = window["cordova"] ? true : false); //是否运行在app中
    const store = useStore();
    const showSplash = ref(false); //是否显示app首页帧动画
    const splash = ref(null);
    const nav = ref(null);
    const update = ref(null);
    const envs = ref(null);
    const { api_token, lang } = useComputed(
      useMapState("user", ["api_token", "lang"])
    );

    // 添加是否运行在app中的标识符
    isApp && $("#app").addClass("app");

    // 显示App启动动效
    function showAppSplash() {
      if (!isApp) {
        return;
      }
      let appUpdated = localStorage.getItem("appUpdated");
      if (appUpdated) {
        //热更新刷新，不播放动画，并更新热更版本号
        store.commit("user/updateChcpVersion");
        nextTick(() => {
          checkDeviceready();
        });
      } else {
        showSplash.value = true;
        nextTick(() => {
          hideSplash();
          setTimeout(() => {
            splash.value.className = "splash active";
            checkDeviceready();
          }, 2000);
        });
      }
    };

    //隐藏App启动动效,并设置状态栏为沉浸式透明
    function hideSplash() {
      ["webkitAnimationEnd", "animationend"].forEach((item) => {
        splash.value.addEventListener(item, () => {
          setTimeout(() => {
            showSplash.value = false;
            store.dispatch("user/setTheme");
          }, 500);
        });
      });
    };

    //检测壳连接状态
    function checkDeviceready() {
      if (window["deviceready"]) {
        //关闭App启动封面
        window.navigator && window.navigator.splashscreen && window.navigator.splashscreen.hide();
        //获取系统语言,在未设置国际化时，如果有对应系统语言的国际化配置存在，则启用此系统语言配置的国际化
        if (!localStorage.getItem("lang")) {
          getDeviceLang().then((lang) => {
            let _lang = this.lang,
              _langs = langs.map((item) => {
                return item.value;
              });
            if (_langs.includes(lang)) {
              _lang = lang;
            } else if (lang.includes("en")) {
              _lang = "en-US";
            }
            // console.log({lang}, {_lang}, {_langs})
            store.dispatch("user/setLang", _lang);
          });
        }
        //获取并设置app版本号
        store.commit("user/updateVersion", AppVersion.version);
      } else {
        setTimeout(checkDeviceready, 100);
      }
    };

    gtValidate();
    showAppSplash();

    //初始化app主题
    store.dispatch("user/setTheme");
    //获取系统参数
    store.dispatch("user/getSysParams");
    //获取交易市场
    store.dispatch("exchange/getMarkets");
    // 获取用户状态
    api_token.value && store.dispatch("user/getUserState");
    // 获取用户消息
    api_token.value && store.dispatch("user/getMessages");
    //获取用户钱包
    api_token.value && store.dispatch("wallet/getWallet");

    //建立全局推送，初始化数据
    window.gws = new GlobalWebSocket();
    gws.getRate((res) => {
      //获取实时汇率
      let _rate = res.reduce((obj, item) => {
        obj[item.code] = item.rate;
        return obj;
      }, {});
      store.commit("exchange/updateBtcValues", _rate);
    });
    gws.checkNetWork((signal) => {
      //获取网络监测
      store.commit("exchange/updateNetworkSignal", signal);
    });

    onMounted(() => {
      watch(api_token, (_new) => {
        // 获取用户状态
        _new && store.dispatch("user/getUserState");
        // 获取用户消息
        _new && store.dispatch("user/getMessages");
        //获取用户钱包
        _new && store.dispatch("wallet/getWallet");
        //获取交易市场
        store.dispatch("exchange/getMarkets");
        gws && gws.changeLogin();
      });
    });

    return {
      showSplash,
      splash,
      nav,
      update,
      envs
    };
  },
};
</script>

<style lang="less">
@import "./assets/css/common.less";
@import "./assets/css/style.less";

.splash {
  background-color: #000000;
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 3;
  &:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    padding-top: 177.87%;
    background-image: url("./assets/img/splash.jpg");
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: 0px 50%;
    transform: translate3d(0, -50%, 0);
  }
  &.active:after {
    animation: play 3500ms steps(31, end) forwards;
  }
}
@keyframes play {
  0% {
    background-position: 0px 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}
</style>

